import styles from './index.css';

import React, { useState, useEffect} from 'react';

import { Layout, Icon, Form, Button, Card,Input,message,Switch,Select } from 'antd'
import action from '@/pageCore/api'; 
import svg from '@/pageCore/svg'
const {Option } = Select

const cur = 1;
 

export default function() {


  const [showCard, setShowCard] = useState(false);

  const [month, setMonth] = useState("");

  // action("/post",{ method:'post',data:{ 1:1 } })

  // action("/post",{ method:'post',}).then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); });
    function changePassword(oldPassword,password){
     
      if(oldPassword.trim()==="" )return   message.error("Pleass enter oldPassword");
      if(password.trim()==="" )return   message.error("Pleass enter password");
      action("/api/post").then(function(response) { 
        console.log(response); 
        message.success("change password success")
        }) .catch(function(error) {
          message.success("change password error")
           console.log(error); 
        });  

    }
   
   const check = (str)=>{
      var cur = "January,February,March,April,May,June,July,August,September,October,November,December".split(",").indexOf(str)
      var today = new Date().getMonth();
      return cur < today;
    }
    const getStyle = (str)=>{ 
      if( check(str)) return { cursor:"not-allowed" }
      return month == str ? { color: "#0052cc", borderBottom: "2px solid #0052CC",cursor:"pointer",paddingBottom:2  }: { color: "#0052cc",cursor:"pointer" };
    }
    const chooseMonth = (str)=>{
      if( check(str)) return {  }
      setMonth(str)
      setShowCard(false)
    }
    const renderMonth = (str)=>{
      return <div className="domo">
        <span style={getStyle(str)}  onClick={()=>{chooseMonth(str) } }> {str}</span>
      </div>
    }
    

  
  return (
    <div className={styles.normal} style={{ width: 330}}>  

      <h3>布局</h3> 
      <Input placeholder="Date" value={month}  suffix={  <Icon type="down"   />} /> 

      <h3>onchange 去改变值  显示输入</h3> 
      <Input placeholder="Date" value={month}  onChange={(e)=>{ setMonth(e.target.value)  }} suffix={  <Icon type="down"   />} /> 

      <h3>card 布局小元素 (小鼠标)</h3> 
      <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, cursor:"pointer" }  }>  January </span>
      <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, cursor:"not-allowed"}  }>  January </span>
      
      <h3>加div才能让元素有居中的排版</h3>   
      <div className="domo">
        <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, }  }>  January </span>
      </div> 
      <div className="domo">
        <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, }  }>  January </span>
      </div> 
      <h3>input 和 card 显隐藏控制</h3>   
      <Input placeholder="Date" value={month}  suffix={  <Icon type="down"  onClick={()=>{  setShowCard(true)  } } />} /> 
      <Card style={{ width: 330,display:showCard?'':'none'}}>
        <div className="domo">
          <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, }  }  onClick={()=>{  setShowCard(false);setMonth('January');  } } >  February </span>
        </div> 
        <div className="domo">
          <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, }  }  onClick={()=>{  setShowCard(false);setMonth('January');  } } >  February </span>
        </div> 

      </Card> 
      <h3>点进input 的事件 是onFocus</h3>   
      <Input placeholder="Date" value={month} onFocus={()=>{ setShowCard(true) } }   suffix={  <Icon type="down"  onClick={()=>{  setShowCard(true)  } } />} /> 
      <Card style={{ width: 330,display:showCard?'':'none'}}>
        <div className="domo">
          <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, }  }  onClick={()=>{  setShowCard(false);setMonth('January');  } } >  February </span>
        </div> 
        <div className="domo">
          <span style={ { color: "#0052cc", borderBottom: "2px solid #0052CC",width:200, }  }  onClick={()=>{  setShowCard(false);setMonth('January');  } } >  February </span>
        </div> 

      </Card> 

    </div>
  );
}
